<template>
  <div>
    <div class="from-row">
      <div class="form-group col-md-12 mt-4">
        <label for="inputPassword4">用户名</label>
        <input v-model="username" type="text" class="form-control f-bg"  placeholder="请输入用户名">
      </div>
      <div class="form-group col-md-12 mt-5">
        <label for="inputPassword4">密码</label>
        <input v-model="password" type="password" class="form-control f-bg" placeholder="请输入密码">
      </div>
    </div>
    <div class="row mt-5">
      <div class="col col-11 ml-3">
        <button type="button" class="btn btn-outline-primary btn-block" @click="handEnter">登录</button>
      </div>
    </div>
  </div>
  
</template>

<script>
import {getLogin} from '@/api/user'
import {setCookie} from '@/until/cookie'
export default {
  name:'LogIn',
  data(){
    return{
      username:'',
      password:''
    }
  },
  methods:{
    handEnter(){
      getLogin({username:this.username, password:this.password})
      .then(res=>{
        // console.log(res.data);
        let message=res.data.message//获取登录成功提示语
        res=res.data.data//获取到登录中的data数据
        let token= res.token;//获取到token
        setCookie('token',token)//将token保存到setcooie中也就是服务中
        alert(message)
        this.$router.push('/')
      }).catch(err=>{
        console.log(err)
      })
    }
  }
  
}
</script>

<style scoped>
.f-bg{ 
  background-color:rgba(0, 0, 0,.0);
  border:1px solid rgba(0, 0, 0,.2);
}
</style>